<script lang="ts" setup>
import {
  ScheduleOutlined,
  SolutionOutlined,
  TeamOutlined,
  BellOutlined,
} from '@ant-design/icons-vue';
import { ref } from 'vue';
import { type NotificationPlacement, notification } from 'ant-design-vue';
import type {LinkForBreadcrumb} from "@/utils/dataTypes";


const props = defineProps<{
  currentKey?: string,
  breadCrumb?: LinkForBreadcrumb[]
}>();

console.log(props.currentKey);

const collapsed = ref<boolean>(true);
const selectedKeys = ref<string[]>([props.currentKey??""]);

const [api, contextHolder] = notification.useNotification();
const notify = (message: string) => openNotification('topRight', `提示`, message);
const openNotification = (placement: NotificationPlacement, title: string, message: string) => {
  api.info({
    message: title,
    description:
        message,
    placement,
  });
};

const clickMenu = (e: {key: string}) => {
  notify(e.key);
}


</script>

<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <div class="logo" >
        <a-avatar :size="32" style="background-color: rgb(85, 142, 213)">用</a-avatar>
      </div>
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" @click="clickMenu">
        <a-menu-item key="1">
          <schedule-outlined />
          <span>日程</span>
        </a-menu-item>
        <a-sub-menu key="sub1">
          <template #title>
            <span>
              <solution-outlined />
              <span>参与</span>
            </span>
          </template>
          <a-menu-item key="2">建设</a-menu-item>
          <a-menu-item key="3">验收</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2" @titleClick="clickMenu">
          <template #title>
            <span>
              <team-outlined />
              <span>团队</span>
            </span>
          </template>
          <a-menu-item key="6">Team 1</a-menu-item>
          <a-menu-item key="8">Team 2</a-menu-item>
        </a-sub-menu>
        <a-menu-item key="9">
          <bell-outlined />
          <span>通知</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <!--<a-layout-header style="background: #fff; padding: 0">
        ABCS
      </a-layout-header>-->
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb v-if="breadCrumb != null" style="margin: 16px 0">
          <a-breadcrumb-item v-for="breadLayer in breadCrumb">
            <a v-if="breadLayer.link != null" :href="breadLayer.link">
              {{ breadLayer.name }}
            </a>
            <span v-else>
              {{ breadLayer.name }}
            </span>
          </a-breadcrumb-item>
        </a-breadcrumb>
        <div class="content-container">
          <slot></slot>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Task Master ©2023 Created by Team
      </a-layout-footer>
    </a-layout>
  </a-layout>
  <contextHolder />
</template>

<style scoped>
.logo {
  height: 32px;
  margin: 16px;
  /*background: rgba(255, 255, 255, 0.3);*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-container {
  padding: 24px;
  background: #fff;
  min-height: 360px;
  position: relative;
}

.site-layout .site-layout-background {
  background: #fff;
}
[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
</style>